import React, { FC } from 'react';
import { createRoot } from 'react-dom/client';
import { HashRouter as Router, Route, Link, Routes } from 'react-router-dom';
// import { dynamic } from './utils/dynamic';
import LoadableComponent from '@loadable/component';

// import './store/react-redux/reselect';

// React.lazy() + Suspense
// 加上 /*prefetch:true*/ 注释 在浏览器空闲的时候请求
// webpackPrefetch
// preload 立即加载 <link prefetch>
// TODO: vite项目如何做 plugin?
// https://juejin.cn/post/7134186850637316103

// const LoadingHome = dynamic(
//   () =>
//     import(
//       /* webpackChunkName: 'Home' */ /*webpackPrefetch:true*/ './optimization/components/Home'
//     ),
// );
// const LoadingUser = dynamic(
//   () => import(/*webpackPrefetch:true*/ './optimization/components/User'),
// );

const Home = LoadableComponent(() => import('./optimization/components/Home'));
const User = React.lazy(() => import('./optimization/components/RenderDemo'));
const List = LoadableComponent(() => import('./optimization/components/List'));
const RenderDemo = LoadableComponent(() => import('./optimization/components/RenderDemo'));
const RenderOptDemo = LoadableComponent(() => import('./optimization/components/RenderOptDemo'));
const BigDataDemo = LoadableComponent(() => import('./optimization/components/BigDataDemo'));

const Loading = () => {
  return <div>loading</div>;
};

import Error from './optimization/components/Error';

const App: FC = () => {
  return (
    // <Error />
    <React.Suspense fallback={<Loading></Loading>}>
      <User />
    </React.Suspense>
    // <>
    //   <Router>
    //     <ul>
    //       <li>
    //         <Link to="/">Home</Link>
    //       </li>
    //       <li>
    //         <Link to="/user">User</Link>
    //       </li>
    //       <li>
    //         <Link to="/list">List</Link>
    //       </li>
    //       <li>
    //         <Link to="/render">渲染控制</Link>
    //       </li>
    //       <li>
    //         <Link to="/render-opt">渲染优化</Link>
    //       </li>
    //       <li>
    //         <Link to="/big-data">处理海量数据</Link>
    //       </li>
    //     </ul>
    //     <React.Suspense fallback={<Loading></Loading>}>
    //       <Routes>
    //         <Route path="/" element={<Home />} />
    //         <Route path="/user" element={<User />} />
    //         <Route path="/list" element={<List />} />
    //         <Route path="/render" element={<RenderDemo />} />
    //         <Route path="/render-opt" element={<RenderOptDemo />} />
    //         <Route path="/big-data" element={<BigDataDemo />} />
    //       </Routes>
    //     </React.Suspense>
    //   </Router>
    // </>
  );
};

const root = createRoot(document.getElementById('root') as HTMLElement);

debugger;
root.render(<App />);
